import React from 'react'
import { getTicketList } from '../../api/user'
import { useLoaderData, useSearchParams } from 'react-router-dom'
import { useState } from 'react'
import Header from './component/Header'
import tem from '../query/component/tem'
import { InfiniteScroll, List } from 'antd-mobile'

function Index() {
  let [sp,setSp]=useSearchParams()
  let loaderdata=useLoaderData()
  let [list,setList]=useState(loaderdata.list)
  let [page,setPage]=useState(1)
  let [hasMore,sethasMore]=useState(true)
  async function loadMore() {
    setPage((prev)=>prev+1)
    let datas={...Object.fromEntries(sp),page:page+1}
    let {data:res}=await getTicketList(datas)
    setList([...list,...res.data])

    
    if(res.length===0){
      sethasMore(false)
    }
  }
  return (
    <div>
      <Header></Header>
    {
      list.map((item)=>(
        <tem key={item.id} >{item}</tem>
      ))
    }

<InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  )
}

export default Index


export const loader=async({request})=>{
  let url=new URL(request.url)
  let sp=Object.fromEntries(url.searchParams)
  let {data:res}=await getTicketList(sp)
  console.log(res.data);
  
  return{
    list:res.data
  }
}
